<template>
  <el-row>
    <el-col :span="18" :offset="3">
      <el-row>
        <el-col :span="12" :offset="6" style="margin-top: 40px;">
          <el-steps :active="active" align-center>
            <el-step title="验证身份"></el-step>
            <el-step title="更换手机号码"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </el-col>
        <el-col :span="16" :offset="4" style="margin-top: 40px;">
          <el-form class="el-form-col" :model="model" label-position="left" ref="elForm" label-width="120px">
            <el-row class="row">
              <template v-if="active == 1">
                <el-col :span="16" :offset="4">
                  <el-form-item label="登录手机">
                    <el-input :disabled="true" :value="this.phone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16" :offset="4">
                  <el-form-item prop="code" label="验证码" :rules="[
                    {required: true, message: '验证码必须', trigger: 'blur'}
                  ]">
                    <el-input v-model="model.code">
                      <template slot="append">
                        <el-button @click.prevent="getVerificationCode" :disabled="times > 0">{{ verificationCodeText }}
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="active == 2">
                <el-col :span="16" :offset="4">
                  <el-form-item prop="newPhone" label="新手机号" :rules="[
                      {required: true, message: '新手机号必须', trigger: 'blur'},
                      { validator: isPhone, message: '请输入正确的电话号', trigger: 'blur' }
                    ]">
                    <el-input v-model="model.newPhone"/>
                  </el-form-item>
                </el-col>
                <el-col :span="16" :offset="4">
                  <el-form-item prop="codeTwo" label="新手机验证码" :rules="[
                    {required: true, message: '验证码必须', trigger: 'blur'}
                  ]">
                    <el-input v-model="model.codeTwo">
                      <template slot="append">
                        <el-button  @click.prevent="getNewPhoneCode" :disabled="timesNew > 0">{{ verificationCodeText2 }}</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="active ==3">
                <el-col :span="16" :offset="4" class="text-center">
                  <el-form-item label-width="0px">
                    <p><i class="el-icon-success m--font-success font-light-blue" style="font-size: 80px"></i></p>
                    <p>更换成功</p>
                    <p>下次登录请新手机号登录</p>
                  </el-form-item>
                </el-col>
              </template>
              <el-col class="text-center" :span="16" :offset="4">
                <el-button style="width:100%" class="btn-block btn-lg" :loading="loading" type="primary" @click.prevent="submit">
                  {{ active == 3 ? '确定' : '下一步' }}
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
import {isPhone} from '@/utils/validate'
import {dotData} from '@/utils'
import { logout } from '@/utils/ajax'
export default {
  name: 'myAccountChangePhone',
  data() {
    return {
      phone: this.$route.params.phone, // 接收路径上传来的phone
      active: 1,
      model: {
        code: '',
        newPhone: '',
        codeTwo: ''
      },
      verificationCodeText: '获取验证码',
      verificationCodeText2: '获取验证码',
      getVerificationCodeButtonDisabled: false,
      config: {
        times: 60,
        timesNew: 60
      },
      times: 0,
      timesNew: 0,
      loading: false
    }
  },
  computed: {
    strPhone() {
      let temp = this.phone || ''
      return temp.substr(0, 3) + '*****' + temp.substr(-3, 3)
    }
  },
  methods: {
    isPhone,
    // 旧手机 发送验证码
    getVerificationCode() {
      this.times = this.config.times
      this.timeReduce()
      this.$ajax.get('/ms-common-user/user/sendSms', {
        phone: this.phone,
        actionId: 'rebindPhone'
      }).then(response => {
        // const success = response.success
        // if (success) {
        //   this.timeReduce()
        // }
      })
    },
    // 旧手机 倒计时
    timeReduce() {
      if (this.times > 0) {
        this.verificationCodeText = this.times + 's'
        setTimeout(this.timeReduce, 1000)
        this.times -= 1
      } else {
        this.verificationCodeText = '获取验证码'
      }
    },
    // 新手机 倒计时
    timeReduceNew() {
      if (this.timesNew > 0) {
        this.verificationCodeText2 = this.timesNew + 's'
        setTimeout(this.timeReduceNew, 1000)
        this.timesNew -= 1
      } else {
        this.verificationCodeText2 = '获取验证码'
      }
    },
    // no2:检查验证码：旧手机验证码
    checkCode() {
      let checkData = {}
      checkData.actionId = 'rebindPhone'
      checkData.phone = this.phone
      checkData.code = this.model.code
      this.loading = true
      // 原接口：/ms-fahuobao-user/OutGoodsUser/outGoodsUserCode
      this.$ajax.get('/ms-common-user/user/check-verification-code', checkData).then(response => {
        if (response.success) {
          this.active = 2
        } else {
          // alert(dotData(response, 'message'))
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    // no3:新手机 下发 验证码
    getNewPhoneCode() {
      this.timesNew = this.config.timesNew
      this.timeReduceNew()
      this.$ajax.get('/ms-common-user/user/sendSms', {
        phone: this.model.newPhone,
        actionId: 'register'
      })
    },
    // 修改手机号
    changePassword() {
      let data = {
        oldPhone: this.phone,
        newPhone: this.model.newPhone,
        code: this.model.codeTwo
      }
      this.loading = true
      // 旧：/ms-fahuobao-user/OutGoodsUser/rebind-phone
      this.$ajax.post('/ms-common-user/user/rebinding-phone', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.active = 3
          setTimeout(this.$confirm('修改成功', '提示', {
            type: 'success',
            center: true,
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.backGoLogin()
          }), 5000)
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    // 退出重新登录
    backGoLogin() {
      logout()
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        if (this.active === 1) {
          this.checkCode()
        } else if (this.active === 2) {
          this.changePassword()
        } else if (this.active === 3) {
          this.backGoLogin()
        }
      })
    }
  }
}
</script>
